<div>
  <d-data-table [lazy]="true" [dataSource]="displayTableData"
  [scrollable]="true" [fixHeader]="true" [maxHeight]="tableheight" [resizeable]="true" [tableOverflowType]="'auto'" [scrollable]="true" [resizeable]="true" [colDraggable]="true" [tableWidthConfig]="tableWidthConfig">
    <thead dTableHead >
      <tr dTableRow >
        <th dHeadCell [fixedLeft]="'0px'">
          <span>序号</span>
        </th>
        <th dHeadCell [fixedLeft]="'80px'">
          <span>操作</span>
        </th>
        <th dHeadCell *ngFor="let colOption of dataTableOptions.columns">{{ colOption.header }}</th>
      </tr>
    </thead>
    <tbody dTableBody>
      <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex" let-nestedIndex="nestedIndex">
        <tr dTableRow>
          <td dTableCell [fixedLeft]="'0px'">
            <span>{{rowIndex + 1}}</span>
          </td>
          <td dTableCell [fixedLeft]="'80px'">
            <span ><a class="devui-link-danger" (click)="DeleteRole(rowItem)">移除</a></span>
          </td>
          <td dTableCell [rowItem]="rowItem" [field]="'showType'">
            <span>{{ rowItem?.type}}</span>
          </td>
          <td dTableCell [rowItem]="rowItem" [field]="'type'">
            <span>{{ rowItem?.code}}</span>
          </td>
          <td dTableCell [rowItem]="rowItem" [field]="'enabled'">
            <span><d-tag [tag]=" rowItem?.enabled | status" [labelStyle]="rowItem?.enabled"></d-tag></span>
          </td>
        </tr>
      </ng-template>
    </tbody>
  </d-data-table>
</div>
<div class="page-footer">
  <div>
    <p>已选 <span class="underline">{{dataLength}}</span> 条
      <a (click)="cleared()" class="devui-link-danger cleared">移除全部</a>
    </p>
  </div>
</div>
